<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>jQuery Template Plugin</title>
    <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
	<script type="text/javascript" language="javascript" src="jquery.tmp.js"></script>
	<link rel="StyleSheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css" media="screen">
	<style>
		body,html{
			font-family:verdana;
			font-size:8px;
		}
	</style>
    <script type="text/javascript" language="javascript">
		var data = [{id:10,text:'CacheHits',value:'9337'},{id:11,text:'CacheReadIndInt',value:'259'},{id:12,text:'CacheReadIndLeaf',value:'1057'},{id:15,text:'CacheRead',value:'9421'}];

		$(function(){
			$('h2').each(function(i,n){
				$(this).prepend('Sample #'+i+': ');
			});
			/*
			var _frm = $('#form1');
			$(data).each(function(){
				$('<div/>',{css:{'float':'left'}}).data('data',this).html(this.text + '('+this.value+'); ').click(function(){
					$(this).html('').tmp({url:'editField.html', contextData:$(this).data('data')})
				}).appendTo(_frm);
			});
			*/
			$('.s1').tmp('<span>Template from static Html...</span>');
			$('.s2').tmp({
				'html':'<span>Indexed div number <%=index%>...</span>',
				'contextData' : {
					'index': 1
				}
			});
			var _newSpan;

			_newSpan = $('<span/>').html('From jQuery Object.'); 
			$('.s3').tmp( _newSpan );

			_newSpan = $('<span/>').html('Indexed with number <%=index++%> From jQuery Object.'); 
			$('.s4').tmp({
				html:_newSpan,
				contextData:{index:0}
			});
			
			$(data).each(function(i,n){
				var _item = $('<div/>').tmp({url:'sample_simple_list.htm', contextData:n}).appendTo($('.s5'));
			});
			
			$('.s6').tmp({url:'sample_hover_click.htm'});
		});
    </script>
</head>
	<body>
		<h1>jQuery.tmp Level 1 - Static Html</h1>
		<h2><i>Load a Template from static Html Javascript String.</i></h2>
		<div class="s1"></div>
		<div class="s1"></div>		
		
		<h2><i>Load a Template from static Html Javascript String with context data.</i></h2>
		<div class="s2"></div>
		<div class="s2"></div>
		
		<h2><i>Load a Template from jQuery Object.</i></h2>
		<div class="s3"></div>
		<div class="s3"></div>
		
		<h2><i>Load a Template from jQuery Object with context data.</i></h2>
		<div class="s4"></div>
		<div class="s4"></div>

		<h1>jQuery.tmp Level 2 - External Html Templates</h1>

		<h1>jQuery.tmp Level 3 - External Html Templates with Javascript Event Bindings</h1>
		<h2><i>Load Templates from external Template.</i></h2>
		<div class="s6"></div>
		<div class="s6"></div>

		<h2><i>Load a Template from external Template Html File.</i></h2>
		<div class="s5"></div>
		<div class="s5"></div>

	</body>
</html>